<template>
    <div class="view-wrap">
        <div class="search-box">
            <el-form inline>
                <el-form-item label="建筑">
                    <el-input @input="handleQuery" v-model.trim="queryParams.keyword" placeholder="请输入建筑名称" clearable />
                </el-form-item>
                
            </el-form>
        </div>
        <div class="view-content">
            <div class="operation-group">
                <el-button type="primary" @click="handleOpenBuildingEditor(null)">新增</el-button>
            </div>
            <el-table :data="tableData" height="calc(100vh - 330px)" style="width: 100%">
                <el-table-column prop="name" label="名称" />
                <el-table-column prop="floor" label="楼层">
                    <template #default="scope"><div v-if="scope.row.floor"><el-tag type="success" style="margin: 0 3px;" v-for="(item,index) in JSON.parse(scope.row.floor)" :key="index">{{item.name}}</el-tag></div></template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" />
                <el-table-column prop="description" label="描述" />
                <el-table-column prop="name" label="操作" width="200">
                    <template #default="scope">
                        <el-link type="primary" style="margin-right: 5px;" @click="handleOpenBuildingEditor(scope.row)">编辑/查看</el-link>
                        <el-link @click="handleDelete(scope.row)" type="danger">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination
                    v-model:current-page="pageNo"
                    v-model:page-size="pageSize"
                    :page-sizes="pageSizes"
                    background
                    layout="sizes, total, prev, pager, next"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
            
        </div>
       
    </div>
    <buildingEditor :visible="buildingEditorVisible" :edit-data="buildingData" @close="handleBuildingEditorClose" />
</template>
  
<script setup lang="ts">
import { ref, watch, reactive, onMounted, onUnmounted } from 'vue';
import { usePagination } from '@/composable/common';
import { getBuildingList, daleteBuilding } from '@/api/building';
import buildingEditor from './buildingEditor.vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter();

const queryParams = reactive({
    keyword: ''
})
const tableData = ref([]);
const {
    pageNo,
    pageSize,
    total,
    pageSizes,
    handleSizeChange,
    handleCurrentChange
} = usePagination(getTableList);
const buildingEditorVisible = ref(false);
const buildingData = ref(null);

onMounted(()=>{
    handleQuery();
})

function handleQuery(){
    pageNo.value = 1;
    getTableList();
}   

function getTableList(){
    console.log(pageNo.value,pageSize.value)
    const params = {
        pageNo: pageNo.value,
        pageSize: pageSize.value,
        keyword: queryParams.keyword
    }
    getBuildingList(params).then(res=>{
        tableData.value = res.data.data;
        total.value = res.data.total;
    })
}

function handleOpenBuildingEditor(data){
    buildingData.value = data;
    buildingEditorVisible.value = true;
}

function handleBuildingEditorClose(type){
    buildingEditorVisible.value = false;
    if(type=='update')handleQuery();
}

function handleDelete(row){
    ElMessageBox.confirm('确认删除此建筑吗？','提示',{
        type: 'warning',
    }).then(()=>{
        daleteBuilding(row.id).then(res=>{
            handleQuery();
        })
    })
}


</script>

<style lang="scss" scoped>



</style>

